<template>
	<div>
		<el-alert title="服务接口调用测试, 探究不同组件对rpc响应时间的影响" type="success" :closable="false" />
		<el-divider />
		<el-row>
			<el-col :span="12">
				<div id="form" class="form">
					<el-form :model="formData" label-width="150px">
						<el-form-item label="服务调用代理方式">
							<el-select v-model="formData.proxy" placeholder="请选择代理方式">
								<el-option label="JDK Proxy" value="JDK" />
								<el-option label="Cglib Proxy" value="CGLIB" />
							</el-select>
						</el-form-item>
						<el-form-item label="网络数据序列化方式">
							<el-select v-model="formData.serialization" placeholder="请选择序列化方式">
								<el-option label="Protostuff" value="PROTOSTUFF" />
								<el-option label="Hessian" value="HESSIAN" />
								<el-option label="JDK" value="JDK" />
							</el-select>
						</el-form-item>
						<el-form-item label="测试服务接口与方法">
							<el-input v-model="formData.method" :readonly="true"></el-input>
						</el-form-item>
						<el-form-item label="调用次数">
							<el-input-number :min="100" :max="3000" :step="100" v-model="formData.count"></el-input-number>
						</el-form-item>
						<el-form-item>
							      <el-tooltip
							        class="box-item"
							        effect="dark"
							        content="注意: 首次调用的存在预热时间, 为了忽略, 实际调用次数为n + 1次"
							        placement="bottom"
							      >
							         <el-button type="primary" @click="onSubmit">测试</el-button>
							      </el-tooltip>
						     
						    </el-form-item>
					</el-form>
					
				</div>
			</el-col>
			<el-col :span="6">
				<div id="totalChart" style="height:100%;width:100%;"></div>
			</el-col>
			<el-col :span="6">
				<div id="averageChart" style="height:100%;width:100%;"></div>
			</el-col>
		</el-row>
		<el-divider />
		<el-alert title="服务负载均衡策略展示, 左边为上游服务, 右边为下游服务, 点击最左侧按钮进行测试(展示)" type="success" :closable="false" />
		<el-row :gutter="20">
			<el-col :span="6">
				<ul class="lb-btns">
					<li>
						<el-button @click="testLoadBalance('RANDOM')">随机</el-button>
					</li>
					<li>
						<el-button @click="testLoadBalance('ROUNDROBIN')">轮询</el-button>
					</li>
					<li>
						<el-button @click="testLoadBalance('LEASTCALL')">最少调用</el-button>
					</li>
				</ul>
				
			</el-col>
			<el-col :span="6">
				<div id="left" class="left-service">client</div>
			</el-col>
			<el-col :span="12">
				<div class="lb-group">
					<h6>LoadBalanceService(服务均衡服务组)</h6>
					<ul>
						<li v-for="service in lbServices">
							<el-tooltip effect="light" :content='"调用次数" + service.callCount' placement="right"  class="right-service" visible>
							        <el-button :id="service.id" :type="getType(service.id)">{{ service.address }}</el-button>
							</el-tooltip>
						</li>
					</ul>
					
				</div>
				
			</el-col>
		</el-row>
	</div>

	
</template>

<script>

import * as echarts from 'echarts';
import axios from 'axios';
import {jsPlumb} from 'jsplumb'

var totalChart;
var averageChart;

let instance;

function initCharts() {
	// 基于准备好的dom，初始化echarts实例
	totalChart = echarts.init(document.getElementById('totalChart'));
	// 绘制图表
	totalChart.setOption({
		title: {
			text: '总耗时',
		},
		series: [
	      {
	        type: 'gauge',
			progress: {
				show: true
			},
			detail: {
				valueAnimation: true,
			},
	        data: [
	          {
	            value: 0,
	            name: 'ms'
	          }
	        ]
	      }
	    ]
	});	
	
	averageChart = echarts.init(document.getElementById('averageChart'));
	// 绘制图表
	averageChart.setOption({
		title: {
			text: 'qps平均耗时',
		},
		series: [
	      {
	        type: 'gauge',
			progress: {
				show: true
			},
			detail: {
				valueAnimation: true,
			},
	        data: [
	          {
	            value: 0,
	            name: 'ms'
	          }
	        ]
	      }
	    ]
	});	
}

	
export default {
	data() {
		return {
			formData: {
				proxy: 'JDK',
				serialization: 'PROTOSTUFF',
				method: 'cn.kimming.rpc.demo.test.service.TestService.test',
				count: 100
			},
			lbServices: [],
			activeId: ''
		}
	},
	methods: {
		onSubmit() {
			const vue = this;
			axios.post('/testconsuming', this.formData)
			.then(function (resp) {
				if (resp.data.success) {
					let total = resp.data.data;
					let avg = total / vue.formData.count;
					totalChart.setOption({
						series: [
						  {
						    data: [
						      {
						        value: total,
								name: 'ms'
						      }
						    ]
						  }
						]
					});
					averageChart.setOption({
						series: [
						  {
						    data: [
						      {
						        value: avg,
								name: 'ms'
						      }
						    ]
						  }
						]
					});
				}
			})
			.catch(function (error) {
			  console.log(error);
			});
		
		},
		createLine(source, target) {
			// 负载均衡连线
			if (!instance) {
				instance = jsPlumb.getInstance();
			}
			instance.connect({
					source: source,
					target: target,
					anchor: ["Right", "Left"],
					endpoint: 'Blank',
					connector: 'Flowchart',
					overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ]
					
			});
		},
		deleteLine() {
			if (!instance) {
				instance = jsPlumb.getInstance();
			}
			instance.deleteEveryConnection()	
		},
		
		testLoadBalance(loadBalance) {
			const vue = this;
			axios.get('/testlbservice?loadBalance=' + loadBalance)
			.then(function (resp) {
				if (resp.data.success) {
					vue.initLbServices();
					let serviceId = resp.data.data;
					vue.activeId = serviceId;
					vue.deleteLine();
					vue.createLine('left', serviceId)
				}
			})
			.catch(function (error) {
			  console.log(error);
			});
		},
		initLbServices() {
			const vue = this;
			axios.get('/lbservices')
			.then(function (resp) {
				if (resp.data.success) {
					vue.lbServices = resp.data.data;
				}
			})
			.catch(function (error) {
			  console.log(error);
			});
		},
		getType(serviceId) {
			return serviceId === this.activeId ? 'success' : '';
		}
	},
	mounted() {
		initCharts();
		this.initLbServices();
		
	}
}

</script>

<style>
	.form {
		margin-left: 200px;
		margin-top: 50px;
		width: 500px;
	}
	
	#chart {
		width: 500px;
		height: 300px;
	}
	
	
	.left-service {
		width: 100px;
		height: 50px;
		margin-top: 90px;
		background-color: #67C23A;
		text-align: center;
		line-height: 50px;
		color: #FFFFFF;
		
	}
	
	.right-service {
		margin: auto;
		width: 150px;
		height: 50px;
		margin-top: 20px;
		text-align: center;
		line-height: 50px;
		
	}
	
	.lb-group h6 {
		text-align: center;
	}
	
	.lb-group {
		margin-top: 20px;
	}
	
	.lb-group ul {
		list-style: none;
	}
	
	.lb-group li {
		text-align: center;
	}
	
	.lb-group li button {
		width: 200px;
		height: 50px;
		margin-top: 20px;
	}
	
	.lb-btns {
		margin-top: 50px;
		margin-left: 100px;
		list-style: none;
	}
	
	.lb-btns li {
		margin-top: 5px;
	}
</style>